诺 之 林

发表于 更新于 分类于

基于地图 JS API 2.0

1 点标记

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      #container {
        width: 1200px;
        height: 720px;
      }
      .amap-icon img {
        width: 28px;
        height: 36px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="https://webapi.amap.com/loader.js"></script>
    <script type="text/javascript">
      window._AMapSecurityConfig = {
        securityJsCode: "9f9d9391b3ba92237652b8a93fe47d96",
      };
      AMapLoader.load({
        key: "f843b51e9bc03fe1f14969aa27e78449",
        version: "2.0",
      })
        .then((AMap) => {
          const gps = [119.418945, 29.24363];
          const map = new AMap.Map("container", {
            center: gps,
            zoom: 13,
          });
          const marker = new AMap.Marker({
            position: gps,
            icon: "https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
          });
          map.add(marker);
        })
        .catch((e) => {
          console.error(e);
        });
    </script>
  </body>
</html>

marker-01.png

2 点聚合

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      #container {
        width: 1280px;
        height: 720px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="https://webapi.amap.com/loader.js"></script>
    <script type="text/javascript">
      window._AMapSecurityConfig = {
        securityJsCode: "9f9d9391b3ba92237652b8a93fe47d96",
      };
      AMapLoader.load({
        key: "f843b51e9bc03fe1f14969aa27e78449",
        version: "2.0",
      })
        .then((AMap) => {
          const gps = [116.405285, 39.904989];
          const points = [
            { weight: 1, lnglat: ["116.506647", "39.795337"] },
            { weight: 1, lnglat: ["116.843352", "40.377362"] },
            { weight: 1, lnglat: ["116.637122", "40.324272"] },
            { weight: 1, lnglat: ["116.105381", "39.937183"] },
            { weight: 1, lnglat: ["116.653525", "40.128936"] },
            { weight: 1, lnglat: ["116.486409", "39.921489"] },
            { weight: 1, lnglat: ["116.658603", "39.902486"] },
            { weight: 1, lnglat: ["116.338033", "39.728908"] },
            { weight: 1, lnglat: ["116.235906", "40.218085"] },
            { weight: 1, lnglat: ["116.366794", "39.915309"] },
            { weight: 1, lnglat: ["116.418757", "39.917544"] },
            { weight: 1, lnglat: ["116.139157", "39.735535"] },
            { weight: 1, lnglat: ["116.195445", "39.914601"] },
            { weight: 1, lnglat: ["116.310316", "39.956074"] },
            { weight: 1, lnglat: ["116.286968", "39.863642"] },
          ];

          const map = new AMap.Map("container", {
            center: gps,
            zoom: 8,
          });
          const _renderMarker = function (context) {
            var content =
              '<img width="14" height="18" src="https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png"></img>';
            context.marker.setContent(content);
          };
          map.plugin(["AMap.MarkerCluster"], function () {
            cluster = new AMap.MarkerCluster(map, points, {
              gridSize: 60,
              renderMarker: _renderMarker,
            });
          });
        })
        .catch((e) => {
          console.error(e);
        });
    </script>
  </body>
</html>

markerCluster-01.png

阅读全文 »

发表于 分类于

1 为什么要升级 HTTP/2

1.1 多路复用(Multiplexing)

HTTP/2 允许在单一的 TCP 连接上并发发送多个请求和响应数据流。这样可以大大提高传输效率，避免 HTTP/1.1 中请求阻塞的问题。

1.2 头部压缩(Header Compression)

HTTP/2 使用 HPACK 算法对头部进行压缩，减少了头部冗余信息的传输。

1.3 二进制分帧(Binary Framing)

HTTP/2 使用二进制格式而不是文本格式来传输数据，这使得解析更高效和可靠。

1.4 服务器推送(Server Push)

服务器可以在客户端请求之前，主动将资源推送给客户端，减少网页加载的时间。

除了上述特性 HTTP/2 还有其他更多特性 提高了 Web 性能、能力和体验

2 如何升级到 HTTP/2

这里的升级方法基于nginx

1
2
3
4
server {
    listen 443 ssl http2;
    ...
}

3 如何验证升级到 HTTP/2

3.1 命令行工具

1
2
3
4
5
6
7
8
9
curl -I "https://blog.nuozhilin.site/"
# HTTP/1.1 200 OK
curl -I --http2 "https://blog.nuozhilin.site/"
# HTTP/1.1 200 OK

curl -I "https://login-api.zhgcloud.com"
# HTTP/2 200
curl -I --http2 "https://login-api.zhgcloud.com"
# HTTP/2 200

3.2 浏览器查看

  • 打开浏览器的”网络”

  • 打开”标题选项”的”协议”

http2-01.png

  • 最终即可查看到 HTTP/2

http2-02.png

发表于 更新于 分类于

1 企业微信

  • 开通企业
    • 企业 ID xxxxxx
  • 创建应用
    • 应用名称 Keycloak
    • AgentId 1000008
    • Secret zzzzzz

以下操作基于应用 Keycloak

  • 企业微信授权登录
    • Web 网页
      • 授权回调域 127.0.0.1:8080
  • 企业可信 IP
    • 可信域名 kc.nuozhilin.site
    • 企业可信 IP 114.222.248.185

2 Keycloak

2.1 服务搭建

  • 安装包方式
1
2
3
4
5
6
7
8
9
10
11
12
# 下载https://www.keycloak.org/archive/downloads-22.0.5.html
tar xf keycloak-22.0.5.tar.gz

cd keycloak-22.0.5

# 查看日志
echo "log=console,file" >> /opt/services/keycloak-22.0.5/conf/keycloak.conf
echo "log-level=INFO" >> /opt/services/keycloak-22.0.5/conf/keycloak.conf

export KEYCLOAK_ADMIN=admin
export KEYCLOAK_ADMIN_PASSWORD=password
./bin/kc.sh start-dev
  • 容器方式
1
2
3
4
5
6
7
8
9
docker run --name keycloak-server -p 8080:8080 \
		-e KEYCLOAK_ADMIN=admin \
		-e KEYCLOAK_ADMIN_PASSWORD=password \
		-d quay.io/keycloak/keycloak:22.0.5 start-dev

echo "log=console,file" >> /opt/keycloak/conf/keycloak.conf
echo "log-level=INFO" >> /opt/keycloak/conf/keycloak.conf

docker restart keycloak-server

2.2 安装插件

1
2
3
4
5
6
7
8
9
10
11
git clone https://github.com/Jeff-Tian/keycloak-services-social-wechatwork.git

cd keycloak-services-social-wechatwork
# 修改Endpoint.java代码 class => public class

# >=JDK 17
mvn clean package

docker cp target/keycloak-services-social-wechat-work-22.0.2.jar keycloak-server:/opt/keycloak/providers

docker restart keycloak-server

企业微信开发文档-读取成员

2.3 管理后台

以下操作基于领域 yuanlin

  • 添加身份供应商
    • 身份供应商 企业微信 WeCom
    • 客户端 ID xxxxxx
    • 客户端密码 zzzzzz
    • 企业微信 AgentID 1000008
    • 首次登录流程 direct grant
  • 添加用户
    • 用户名 yuanlin
    • 身份供应商链接 Wechat-work 关联账号
      • 用户 ID yuanlin
      • 用户名 yuanlin

2.4 用户使用

keycloak-wechat-work-01.png

2.5 应用开发

以下操作基于领域 yuanlin

1
2
3
4
5
6
7
8
{
  "realm": "yuanlin",
  "auth-server-url": "http://127.0.0.1:8080/",
  "ssl-required": "external",
  "resource": "yuanlin-web",
  "public-client": true,
  "confidential-port": 0
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/keycloak-js@22.0.5/dist/keycloak.min.js"></script>
    <script>
      var keycloak = new Keycloak("./keycloak.json");

      keycloak
        .init({ onLoad: "login-required" })
        .then(function (authenticated) {
          alert("Authenticated: " + authenticated);
          document.getElementById("userInfo").innerHTML =
            "Username: " + keycloak.tokenParsed.preferred_username;
        })
        .catch(function () {
          alert("Failed to initialize");
        });

      function logout() {
        keycloak.logout();
      }
    </script>
  </head>
  <body>
    <div id="userInfo"></div>
    <button onclick="logout()">Logout</button>
  </body>
</html>
1
2
3
4
npm i -g http-server

http-server .
# 访问应用http://127.0.0.1:8081/

3 Casdoor

3.1 服务搭建

1
docker run --platform linux/amd64 --name casdoor -p 8000:8000 -d casbin/casdoor-all-in-one

3.2 管理后台

内容待完成

参考

发表于 分类于

通过下述的使用介绍 可以总结出的规律和结论是?

Alfred

  • General
    • Alfred Hotkey: ⌘ Space
  • Features
    • Default Results: Applications
    • File Search
      • Opening Files: open
      • Revealing Files: find
    • Web Search
    • Clipboard History
      • Viewer Hotkey: ⇧⌘ C
    • Snippets
      • Viewer Hotkey: ⇧⌘ S
    • System
      • Lock: lock
      • Sleep: sleep
      • Log Out: logout
      • Restart: restart
      • Shut Down: shutdown
  • Workflows

Alfred 可选替代工具: cerebro-app Raycast

Edge

  • 快捷键
    • ⌘N: 新窗口
    • ⇧⌘N: 新建 InPrivate 窗口
    • ⌘`: 切换窗口
    • ⌘T: 新建标签页
    • ⌘W: 关闭标签页
    • ⌘L: 打开位置
    • ⌘R: 刷新此页面
    • ⌘D: 将此页添加到收藏夹
  • Vimum
    • ?: Show help
    • x: Close current tab
    • X: Restore closed tab
    • B: Open a bookmark in a new tab
    • O: Open URL, bookmark or history entry in a new tab
    • u: Scroll a half page up
    • d: Scroll a half page down
    • gg: Scroll to the top of the page
    • G: Scroll to the bottom of the page
    • /: Enter find mode
      • Cycle forward to the next find match
      • Cycle backward to the previous find match
    • gs: View page source

可选替代工具: Chrome

Warp

  • 快捷键
    • ⌘N: New Windows
    • ⌘`: 切换窗口
    • ⌘T: New Tab
    • ⌘1: Switch to 1st tab
    • ⌘W: Close Current session
  • Command Palatte: ⌘P
    • Enable Editing Commands With Vim Keybindings
    • Save New Launch Configuration
    • Launch Configuration Palatte
  • Ask Warp AI: #

open: macOS 特有的命令行工具 Open opens files from a shell

Edge 可选替代工具: Hyper iTerm2

Zsh

VS Code

  • 快捷键
    • ⌘P: 转到文件
    • ⇧⌘E: 资源管理器
    • ⇧⌘F: 在文件中查找
    • ⇧⌘H: 在文件中替换
    • ⇧⌘P: 命令面板
  • 扩展
    • Vim
    • Bookmarks
      • ⌥⌘K: 书签: 开关
      • ⌥⌘J: 书签: 跳至上一个
      • ⌥⌘L: 书签: 跳至下一个
      • ⇧⌘P + Bookmarks: List: 书签 列表
      • ⇧⌘P + Bookmarks: Clear: 书签 清空
    • Codeium: Free AI-powered code acceleration toolkit
    • Codiumate: Generate Meaningful Tests

通过上述的使用介绍 可以总结出的规律和结论是?

发表于 分类于 
1
2
3
4
5
sudo apt install -y openjdk-11-jdk

wget https://archive.apache.org/dist/kafka/2.1.0/kafka_2.12-2.1.0.tgz

tar xf kafka_2.12-2.1.0.tgz
1
2
3
4
5
6
7
# 查看消费组
/opt/services/kafka/bin/kafka-consumer-groups.sh --bootstrap-server kf1:9095,kf2:9095,kf3:9095 \
    --list

# 查看消费Lag
/opt/services/kafka/bin/kafka-consumer-groups.sh --bootstrap-server kf1:9095,kf2:9095,kf3:9095 \
    --describe --group notification
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import subprocess

kafka_path = '/opt/services/kafka/bin/'
kafka_servers = 'kf1:9095,kf2:9095,kf3:9095'
consumer_group = 'notification'


def parse_lag(output):
    lag = 0
    output_without_empty_lines = "\n".join(
        [line for line in output.split("\n") if line.strip()])
    for line in output_without_empty_lines.splitlines():
        if "LAG" in line:
            continue
        lag_str = line.split()[4]
        if '-' not in lag_str:
            lag += int(lag_str)
    return lag


def kafka_monitor():
    lag = 0
    command = f'{kafka_path}kafka-consumer-groups.sh --bootstrap-server {kafka_servers} --describe --group {consumer_group}'
    output = subprocess.check_output(
        command, shell=True, universal_newlines=True)
    lag = parse_lag(output)
    return lag


print(kafka_monitor())

发表于 分类于

ChatGPT-Next-Web

1
2
3
4
5
docker run -d -p 3000:3000 \
   -e OPENAI_API_KEY=sk-xxxx \
   -e CODE=chatgptnextweb2024 \
   --name chatgpt-next-web \
   yidadaa/chatgpt-next-web

LobeChat

1
2
3
4
5
docker run -d -p 3210:3210 \
    -e OPENAI_API_KEY=sk-xxxx \
    -e ACCESS_CODE=lobechat2024 \
    --name lobe-chat \
    lobehub/lobe-chat

发表于 分类于

案例 1

tailwindcss-01.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
    <link
      href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.2/css/all.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="flex w-[300px] m-3 p-3 border-2 border-black">
      <img class="w-20 h-20" src="https://loremflickr.com/320/320/boy" />
      <div class="flex flex-col justify-center ml-3">
        <p class="text-xl text-blue-600">天鼎-挖掘机-郑休文</p>
        <div class="flex">
          <h2 class="text-base text-gray-600">挖掘机</h2>
          <p class="text-base text-gray-600 ml-2">加藤 HD820</p>
        </div>
        <div class="flex mt-1">
          <i class="fas fa-mobile-alt text-base"></i>
          <i class="fas fa-camera text-base ml-4"></i>
          <div
            class="flex items-center text-xs text-red-600 bg-red-100 ml-4 px-2 rounded-xl"
          >
            报停
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

案例 2

tailwindcss-02.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
    <link
      href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.2/css/all.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="flex flex-col w-[300px] m-3 border-2 border-black">
      <div class="flex items-center p-2">
        <div
          class="flex justify-center text-sm text-green-600 bg-green-100 w-12 rounded"
        >
          运行
        </div>
        <div class="flex ml-auto w-12">
          <i class="fas fa-mobile-alt text-sm text-green-600"></i>
          <p class="text-sm text-green-600 ml-2">93%</p>
        </div>
      </div>
      <div class="flex flex-col p-2 bg-[#5B75F2]">
        <div class="flex">
          <p class="text-base text-gray-300">项目</p>
          <p class="text-base text-slate-100 ml-4">南京市江宁体育馆项目</p>
        </div>
        <div class="flex">
          <p class="text-base text-gray-300">地点</p>
          <p class="text-base text-slate-100 ml-4">
            南京市江宁区淳化街道格致路1号
          </p>
        </div>
        <div class="flex">
          <p class="text-base text-gray-300 ml-2">(2024-04-22 09:30)</p>
        </div>
      </div>
      <div class="flex">
        <div class="flex items-center justify-center w-1/2 h-10 bg-gray-100">
          <i class="fas fa-sync-alt text-sm text-gray-600"></i>
          <p class="text-sm text-gray-600 ml-2">刷新</p>
        </div>
        <div class="flex items-center justify-center w-1/2 h-10 bg-gray-100">
          <i class="fas fa-bars text-sm text-gray-600"></i>
          <p class="text-sm text-gray-600 ml-2">导航</p>
        </div>
      </div>
    </div>
  </body>
</html>

资源

发表于 更新于 分类于
工具
https://poe.com/
https://www.codium.ai/
https://codegeex.cn/
https://github.com/PaddlePaddle/PaddleOCR
私有化
https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web
https://github.com/lobehub/lobe-chat
多媒体
https://github.com/InstantID/InstantID
https://github.com/chidiwilliams/buzz
https://www.suno.ai/
开发
https://huggingface.co/
https://www.langchain.com/
https://www.llamaindex.ai/
https://mediapipe-studio.webapps.google.com/home
https://github.com/microsoft/semantic-kernel
书籍
https://aitutor.liduos.com/
https://github.com/chidiwilliams/buzz
https://www.suno.ai/

发表于 更新于 分类于

HuggingFace The platform where the machine learning community collaborates on models, datasets, and applications

文本摘要

  • summery.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
from transformers import pipeline

summarizer = pipeline("summarization")
summary = summarizer(
    """
    America has changed dramatically during recent years. Not only has the number of
    graduates in traditional engineering disciplines such as mechanical, civil,
    electrical, chemical, and aeronautical engineering declined, but in most of
    the premier American universities engineering curricula now concentrate on
    and encourage largely the study of engineering science. As a result, there
    are declining offerings in engineering subjects dealing with infrastructure,
    the environment, and related issues, and greater concentration on high
    technology subjects, largely supporting increasingly complex scientific
    developments. While the latter is important, it should not be at the expense
    of more traditional engineering.

    Rapidly developing economies such as China and India, as well as other
    industrial countries in Europe and Asia, continue to encourage and advance
    the teaching of engineering. Both China and India, respectively, graduate
    six and eight times as many traditional engineers as does the United States.
    Other industrial countries at minimum maintain their output, while America
    suffers an increasingly serious decline in the number of engineering graduates
    and a lack of well-educated engineers.
"""
)
print(summary)
1
2
3
pip install torch transformers

python summary.py

对中文支持不友好

0%